<template>
  <view class="before-result-page-mbti">
    <view class="top-info-wrapper">
      <view class="p1-box">
        {{p1}}
      </view>
      <view class="p2-box">
        {{p2}}
      </view>
    
      <view class="btn-box" @click="toScl">
        开始测试
      </view>
    </view>
    <template v-for="(img,index) in staticImgs.imgArr" >
      <view class="img-wrapper">
        <image class="img" :src="img" mode="widthFix"></image>  
      </view>
    </template>
    
    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->      
      <view class="btn-box" @click="toScl">
        开始测试
      </view>
      
    </view>
  </view>
</template>

<script>
  export default{
    props:{
      scrollTopNum:{
        type:Number,
        default:0
      },
      sclId:{
        type:String,
        default:'',
      },
    },
    data(){
      return{
        staticImgs:{
          imgArr:[
            // this.imgBaseURL + '/scl/ad/MBTI/love/1@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/2@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/3@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/4@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/5@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/6@2x.png',
            // this.imgBaseURL + '/scl/ad/MBTI/love/7@2x.png',
            // this.imgBaseURL + '/scl/scl-before-result-page/xg-mbti/img-1.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/xg-mbti/img-2.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/xg-mbti/img-3.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/xg-mbti/img-4.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/xg-mbti/img-5.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/xg-mbti/img-6.jpg',
            this.imgBaseURL + '/scl/ad/MBTI/love/7@2x.png',
          ],
        },
        windowHeight:99999,
        p1:'你的性格最贴近哪种MBTI?',
        p2:'更深入的了解自己',
        showFixedBtn:false
      }
    },
    watch:{
      scrollTopNum(val){
        // console.log(val,'====this.windowHeight')
        this.showFixedBtn = val> (this.windowHeight)
      }
    },
    mounted() {
      const that = this
      this.hasOwnOk = false
      uni.getSystemInfo({
        success(res) {
          // console.log(res,'====mounted==res')
          that.windowHeight = res.windowHeight/res.devicePixelRatio
        },
        fail() {
          that.windowHeight = 1280
        }
      })
    
    },
    methods:{
      toScl(){
        uni.navigateTo({
          url:'/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
            sclId: this.sclId,
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .before-result-page-mbti{
    padding-bottom: 10vh;
    background-color: #fff;
    position: relative;
    
    .btn-box{
      width: 500rpx;
      height: 90rpx;
      
      background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
      box-shadow: 0rpx 10rpx 0rpx 0rpx #4155E3;
      border-radius: 45rpx;
      margin: auto;
      
      font-family: PingFang-SC, PingFang-SC;
      // font-weight: bold;
      font-size: 34rpx;
      color: #FFFFFF;
      line-height: 90rpx;
      // text-shadow: 0px 10px 0px #4155E3;
      text-align: center;
      font-style: normal;
    }
    
    .btn-wrapper-pos{
     position: fixed; 
     bottom: 15vh;
     
     left: 0;
     right: 0;
     
     display: flex;
     justify-content: center;
    }
    
    
    
    .top-info-wrapper{
      padding-bottom: 60rpx;
    }
    
    .p1-box{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 34rpx;
      color: #000B47;
      line-height: 48rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
    }
    .p2-box{
      margin-top: 4rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #000B47;
      line-height: 42rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
      
      margin-bottom: 30rpx;
    }
    
    
    .img-wrapper{
     position: relative; 
     
     .img{
       width: 750rpx;
       margin-bottom: 10px;
     }
    }
  }
</style>